import React, { Component } from "react";
import "./style.scss";
import { Route } from "react-router-dom";
class Index extends Component {
  goRoutePage = (url) => () => {
    this.props.history.replace(url);
  };
  render() {
    return (
      <div className="page-footer-nav">
        <Route
          path="/cookbook"
          children={({ match }) => {
            console.log(match);
            return (
              <div
                className={match ? "active" : ""}
                onClick={this.goRoutePage("/cookbook")}
              >
                <span>图标</span>
                <span>首页</span>
              </div>
            );
          }}
        />
        <Route
          path="/category"
          children={({ match }) => {
            console.log(match);
            return (
              <div
                className={match ? "active" : ""}
                onClick={this.goRoutePage("/category")}
              >
                <span>图标</span>
                <span>分类</span>
              </div>
            );
          }}
        />

        <Route
          path="/me"
          children={({ match }) => {
            console.log(match);
            return (
              <div
                className={match ? "active" : ""}
                onClick={this.goRoutePage("/me")}
              >
                <span>图标</span>
                
                <span>个人</span>
              </div>
            );
          }}
        />
      </div>
    );
  }
}

export default Index;
